<template>
  <div>
    <!-- {{$t('lineItem.title1')}} -->
    <!-- <div class="lf-title left-justifying"> <img src="@/assets/img/new/title_icon.png" alt="" /> {{ lineDateData.lineDataTile }}</div> -->
    <v-chart class="chart" :style="{height: heightValue +'px'}" :option="option" v-if="JSON.stringify(option) != '{}'" />
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted,toRefs,reactive,defineProps,watch } from "vue";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";
import { number } from "echarts";
const props = defineProps({
  heightValue: Number,
  TitleValueOne:{
    type:String,
    defult:''
  },
  xDate:{
    type:Array,
    defult:()=>[]
  },
  yListLine:{
    type:Array,
    defult:()=>[]
  },
});
const titleName1 = ref(); // 定义的titleName

  //使用toRefs解构
const {xDate,yListLine,heightValue,TitleValueOne} = toRefs(props) //转成响应式
 // 两种监听格式
 watch([xDate,yListLine,TitleValueOne],(newValue:any,oldValue)=>{
    // console.log('watch newValue xDate===',newValue[0])
    // console.log('watch newValue yListLine===',newValue[1])
    // console.log('watch newValue Title2Value===',newValue)
    let dayArr = newValue[0]
    let numList = newValue[1]
    let Title1Txt = newValue[3]
    titleName1.value = Title1Txt
    
    setOption(dayArr,numList);
   
  },{deep:true})
const option = ref({});

const setOption = async (xData: any[], yData: any[]) => {
  option.value = {
    xAxis: {
      type: "category",
      data:xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        // show:false,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
//       formatter:function(params:any){
//         console.log('params-',params)
//  // 这里可以动态设置悬浮框内容，params.name为数据名，params.seriesName为类目名
//  console.log('Title2Value==',Title2Value)
//           // return Title2Value + ' : ' + params.name;
//       }
    },
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "32px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        // name: $t('lineItem.title1'),
        tooltip: {
              valueFormatter: function(value:any) {
               
                return titleName1.value+'：'+value //return titleName1.value+'：'+value
            }
          },
        color: "rgba(252,144,16,.7)",
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(252,144,16,.7)",
              },
              {
                offset: 1,
                color: "rgba(252,144,16,.0)",
              },
            ],
            false
          ),
        },
      },
      
    ],
  };
};
onMounted(() => {
  // getData();dateListLine
  // setOption(dateListLine,numList,numList2);
  
  
});
</script>



<style scoped lang="scss"></style>
